import React from "react";
import SearchHeader from "./component/SearchHeader";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { getDateTime3 } from '@/utils/getDate'
import "./style/style.less";
import ThePagination from "../../../components/ThePagination";
import { apiGetAppEvaluateList, apiGetAppEvaluateEdit } from '@/request/appEvaluate'
import TheImage from '@/components/TheImage'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import _ from 'lodash';
import {Space} from "antd";

class Evaluate extends React.Component {
  state = {
    columns: [
      {
        title: "商品图",
        dataIndex: "goodsShowImages",
        key: "goodsShowImages",
        render: (text) => {
          if (text){
            let arr = text.split(',')
            return <Space>
              {
                arr.map(v => {
                  return <TheImage src={v} width={80} height={80} />
                })
              }
            </Space>
          }
        }
      },
      // {
      //   title: "ID",
      //   dataIndex: "goodsId",
      //   key: "goodsId",
      // },
      {
        title: "商品名称",
        dataIndex: "goodsName",
        key: "goodsName",
        render: (text, record) => {
          return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.goodsName}</div>
        }
      },
      {
        title: "评价类型",
        dataIndex: "evaluationType",
        key: "evaluationType",
        render: (text, render) => {
          let label = ''
          switch (render.evaluationType) {
            case 'H':
              label = "好评"
              break;
            case 'Z':
              label = "中评"
              break;
            case 'C':
              label = '差评'
              break;
            default:
              label = "字段值错误"
          }
          return label
        }
      },
      {
        title: "评价内容",
        dataIndex: "evaluationContent",
        key: "evaluationContent",
        render: (text, record) => {
          return <div className="td-ellipsis" style={{ width: 500 }}>{text}</div>
        }
      },
      {
        title: "图片",
        dataIndex: "images",
        key: "images",
        render: (text) => {
          if (text){
            let arr = text.split(',')
            return <Space>
              {
                arr.map(v => {
                  return <TheImage src={v} width={80} height={80} />
                })
              }
            </Space>
          }
        }
      },
      {
        title: "用户昵称",
        dataIndex: "nickName",
        key: "nickName",
      },
      {
        title: "用户等级",
        dataIndex: "levelImg",
        key: "levelImg",
        render: (text) => {
          return <TheImage src={text} width={60} height={40} />
        }
      },
      {
        title: "评价状态",
        dataIndex: "evaluationStatus",
        key: "evaluationStatus",
        render:(text, record)=>{
          return !record.evaluationStatus ? '正常' : "隐藏"
        }
      },
      {
        title: "评价时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "操作",
        fixed: "right",
        width: 200,
        render: (text, render) => {
          return (
            <div>
              {render.isRealComment ? [] : <TheButton onClick={() => this.goEdit(render.goodsEvaluationId,render.goodsId)}>编辑</TheButton> }
              <TheButton onClick={() => this.goShowOfHide(render)}>{render.evaluationStatus?"显示":"隐藏"}</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {},
    newColumns: [],
    form_show: true,
    searchOption: [
      { field: 'goodsId', label: '商品ID', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
      { field: 'goodsName', label: '商品名称', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
      { field: 'nickName', label: '用户名称', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
      { field: 'evaluationType', label: '评价类型', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ value: 'H', label: '好评' }, { value: 'Z', label: '中评' }, { value: 'C', label: '差评' }], defaultValue: '' },
      { field: 'evaluationStatus', label: '评价状态', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ value: 0, label: '正常' }, { value: 1, label: '隐藏' }], defaultValue: '' },
      { field: 'time', label: '评价时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
    ],
    queryForm: {},
  };
  componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'appEvaluate') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
  }
  getData = async (values) => {
    let { pageNo, pageSize } = this.state.pageData
    if (values && !_.isEmpty(values.time)) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let {time,...form} = {...this.state.queryForm}
      const params = {
        pageNo, pageSize,queryForm: {...form,time}
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'appEvaluate',
          ...params
        }
      })
      let res = await apiGetAppEvaluateList({ pageNo, pageSize, ...this.state.queryForm, })
      if (res.code === 0 && res.data) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount,
        })
      }
    })
  }
  getValue = (value) => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  goEdit = (id,gId) => {
    this.props.history.push(`/app/Evaluate/edit/${id}/${gId}`);
  };
  goShowOfHide = async (data) => {
    let { goodsEvaluationId,evaluationStatus,goodsId } = data;
    evaluationStatus = !evaluationStatus?1:0;
    let res = await apiGetAppEvaluateEdit({ goodsEvaluationId,evaluationStatus,goodsId })
    if (res.code === 0) {
      // React.$message({
      //   type: 'info',
      //   content: '操作成功'
      // })
      this.getData()
    }
  };
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  delConfirm = () => {
    React.$confirm({
      title: "您确认删除此条商品吗?",
      onOk: async () => { },
    });
  };
  // offShelf = (productId, productStatus) => {
  //   React.$confirm({
  //     title: '您确定下架该商品吗？',
  //     onOk: async () => {
  //       await apiProductInfoPutaway({ productId, productStatus })
  //       await this.getData()
  //     }
  //   })
  // }
  // putShelf = (productId, productStatus) => {
  //   React.$confirm({
  //     title: '您确定上架该商品吗？',
  //     onOk: async () => {
  //       await apiProductInfoPutaway({ productId, productStatus })
  //       await this.getData()
  //     }
  //   })
  // }
  goAdd = () => {
    this.props.history.push("/app/Evaluate/add");
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  onFormSearch(values){
    this.setState({
      pageData:{pageNo:1,pageSize:10}
    },()=>{
      this.getData(values)
    })
  }
  render() {
    const {
      columns,
      dataSource,
      loading,
      pageData: { pageNo, pageSize },
      total,
      form_show, searchOption, newColumns
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        {/*<SearchHeader history={this.props.history} goAdd={this.goAdd} getValue={this.getValue} />*/}
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                      onGetValues={(values) => this.onFormSearch(values)}
                      onReset={(values) => this.onReset(values)}
        >
        </TheQueryForm>
        <TheTableExtend
            columns={columns}
            onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
            onTableRefresh={() => this.getData()}
            onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
          <TheButton type="default" size="middle" onClick={this.goAdd}>
            新增评价
          </TheButton>
        </TheTableExtend>
        <div className="p-layout-content-pagination">
          <TheTable
              // scroll={{ x: "max-content", y: '63vh' }}
              columns={newColumns}
              dataSource={dataSource}
              loading={loading}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default Evaluate;
